<template>
	<view class="room-item">
		<view class="box" v-for="(item,index) in dataList" :key="index">
			<view class="flex-sb mt-20">
				<view style="font-size: 32rpx;font-weight: 600;">{{item.productName}}</view>
				<view class="state-tag" :class="item.status === '0'?'tag-bg01':'tag-bg02'">{{item.status === '0'?'启用':'禁用'}}</view>
			</view>
			<view class="flex-sb">
				<view>
					<view class="mt-20">单价：{{item.price}}元/小时</view>
					<view class="mt-20">原价：{{item.oriPrice}}元/小时</view>
				</view>
				<view @click="emitOpenPop(item)">
					<image class="qrCode" mode="" :src="item.productQrCodeImage"></image>
				</view>
			</view>
			<view class="flex-sb mt-20">
				<view>排序：{{item.productSort}}</view>
				<view style="font-size: 22rpx;">查看二维码</view>
			</view>
			<uni-row class="demo-uni-row" :gutter="30">
				<uni-col :span="6">
					<view class="row-btn" @click="toRoomSetting(item)">
						编辑
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="row-btn" @click="toPriseSetting(item)">
						价格设置
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="row-btn" :class="item.packageStatus?'bg-checked':''" @click="toPacketSetting(item,index)">
						套餐
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="row-btn" @click="toDeviceManage(item)">
						设备管理
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="row-btn" @click="openDoor(item)">
						开门
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="row-btn" @click="openElectronic(item)">
						通电
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="row-btn" @click="closeElectronic(item)">
						断电
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="row-btn" @click="remind(item)">
						提醒
					</view>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script>
	export default {
		name: "room-item",
		props: {
			dataList: {
				type: Array,
				default: []
			},
			shopId:{
				type:String,
				default:''
			}
		},
		data() {
			return {
                
			};
		},
		methods: {
			// 价格设置
			toPriseSetting(item){
				uni.navigateTo({
					url:`/pages/price-setting/price-setting?productId=${item.productId}&shopId=${this.shopId}`
				})
			},
			// 套餐设置
			toPacketSetting(item,index){
				this.$emit('packageSetting',item,index)
			},
	
			// 包间设置
			toRoomSetting(item) {
				this.$emit('editRoom',item)
			},
			// 设备管理
			toDeviceManage(item) {
				const productId = item.productId;
				uni.navigateTo({
					url: `/pages/device-manage/device-manage?productId=${productId}`
				})
			},
			// 查看二维码
			emitOpenPop(item) {
				const data = item?.productQrCodeImage || ''
				this.$emit('openPopEvent', data)
			},
			// 开门
			openDoor(item) {
				const productId = item.productId;
				uni.showModal({
					title: '提示',
					content: '是否确认开门？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/product/openDoor/${productId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								console.log('开门成功')
							}).catch(err => {
								console.log('开门异常：', err)
							})
						}
					}
				})
			},
			// 通电
			openElectronic(item) {
				const productId = item.productId;
				uni.showModal({
					title: '提示',
					content: '是否确认通电？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/product/openElectronic/${productId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								console.log('通电完成')
							}).catch(err => {
								console.log('通电异常：', err)
							})
						}
					}
				})
			},
			// 断电
			closeElectronic(item) {
				const productId = item.productId;
				uni.showModal({
					title: '提示',
					content: '是否确认断电？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/product/closeElectronic/${productId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								console.log('断电完成')
							}).catch(err => {
								console.log('断电异常：', err)
							})
						}
					}
				})
			},
			// 播放提醒
			remind(item) {
				const productId = item.productId;
				uni.showModal({
					title: '提示',
					content: '是否确认提醒？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '#FF4B33',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/product/remind/${productId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								console.log('提醒完成')
							}).catch(err => {
								console.log('提醒异常：', err)
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.room-item {
		.flex-sb {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
		}

		.mt-20 {
			margin-bottom: 20rpx;
		}

		.row-btn {
			border: 1px solid #CCC;
			color: #ff9600;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			text-align: center;
			padding: 16rpx 0;
			font-size: 26rpx;
		}
		
		.bg-checked{
			background: #ff9600;
			color: #FFF;
			border:none;
		}

		.box {
			border: 1px solid #EEE;
			border-radius: 20rpx;
			padding: 20rpx;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
			margin-bottom: 20rpx;
			box-shadow:
				5px 5px 12px rgba(0, 0, 0, 0.4), 
				inset 0 0 0 rgba(255, 255, 255, 0.9), 
				inset 0 0 0 rgba(0, 0, 0, 0.4);
		}

		.box-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.qrCode {
			width: 116rpx;
			height: 116rpx;
		}

		.state-tag {
			padding: 6rpx 10rpx;
			font-size: 24rpx;
		}

		.user-info-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
		}

		.img-box {
			display: flex;
			align-items: center;
			width: calc(100% - 40rpx);

			.user-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.user-name {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.tag-bg01 {
			color: #00C250;
			background: #d2ffe5;
			border-radius: 10rpx;
		}

		.tag-bg02 {
			color: #FF4B33;
			background: #ffdbd6;
			border-radius: 10rpx;
		}

	}
</style>